<template>
  <!--我的API-->
  <el-row style="height:100%">
    <page>
      <pageheader :isShow="false">
        我的API
      </pageheader>
      <div class="api-page-content">
        <el-card class="box-card tag-card">
          <el-card v-for="(item,index) in list" :key="item.api_key" class="company-card">
            <ul>
              <li>
                <span class="company-card-tit">企业名：</span>{{item.company_name}}</li>
              <li>
                <span class="company-card-tit">api_key：</span>
                <span class="key-width">{{item.api_key}}</span>
              </li>
              <li>
                <span class="company-card-tit">api_secret：</span>
                <span v-show="item.isShowAPISecret" class="key-width">{{item.api_secret}}</span>
                <span v-show="!item.isShowAPISecret" class="key-width">**********</span>
                <el-button size="mini" @click="item.isShowAPISecret = !item.isShowAPISecret" style="margin-left: 20px">
                  <span v-show="item.isShowAPISecret">隐藏</span>
                  <span v-show="!item.isShowAPISecret">显示</span>
                </el-button>
                <el-button type="primary" size="mini" @click="copy('copyHidden'+index)">复制</el-button>
                <el-input type="text" v-model="item.api_secret" :id="'copyHidden'+index" style=" position: absolute;left:-10000px;opacity:0"></el-input>
                <el-button v-if="buttonPermissions.isUpdata" size="mini" @click="refreshSecret(item.id)"style="margin-left: 10px">更新密钥</el-button>
              </li>
              <li class="remarks">
                <span class="company-card-tit">时间粒度：</span>
                <span v-for="time in item.interval_vo_list">{{time.name}}（{{time.tag}}）</span>
              </li>
              <li class="remarks">
                <span class="company-card-tit">数据指标：</span>
                <span v-for="time in item.indicator_vo_list">{{time.name}}（{{time.key}}）</span>
              </li>
            </ul>
          </el-card>
        </el-card>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss" scoped>
  .api-page-content{
    .tag-card{
      border: none;
      border-radius: 0;
      &.is-always-shadow{
        box-shadow: none;
      }
      .el-card__body{
        padding: 0 35px 35px 35px !important;
        .el-table{
          .el-table__header-wrapper{
            .has-gutter{
              tr{
                th{
                  background:#f5f6fa;
                  color:#212947;
                  font-weight: 400;
                  line-height: 56px;
                  padding-top: 0;
                  padding-bottom: 0;
                }
              }
            }
          }


          .el-table__body{
            tbody{
              .el-table__row{
                td{
                  line-height: 50px;
                  height: 50px;
                  div{
                    line-height: 25px;
                  }
                  padding: 0;
                }
              }
              .el-table__row--striped{
                &:hover{
                  &>td{
                    background-color: #F5F7FA;
                  }
                }
                td{
                  background: #f9fafe;
                }
              }
            }
          }
        }
      }
    }
    padding: 15px;
    .company-card{
      width: 80%;
      margin-top: 20px;
      ul{
        li{
          padding: 5px;
          .company-card-tit{
            display: inline-block;
            width: 120px;
          }
          .key-width{
            display: inline-block;
            width: 300px;
            text-align: center;
          }
        }
      }
      .remarks{
        font-size: 14px;
        color: #828282;
        font-style: italic;
      }
    }
  }
</style>
<script>
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  function $(id) { return document.getElementById(id); }

  export default {
    data() {
      return {
        list:[],
        buttonPermissions:{
          isUpdata:false,
        },
      }
    },
    inject: ["reload"],
    components: {
      page,
      pageheader,
    },
    created() {
      //判断是否有按钮权限
      if(sessionStorage.buttonPermissions){
        this.configPermissions(JSON.parse(sessionStorage.buttonPermissions))
      }
    },
    mounted() {
      this.getMyapi()
    },
    methods: {
      //配置按钮权限，根据权限不同调整表头渲染参数
      configPermissions(val){
        let buttonPermissions = val
        let menuButtonPermissions = [];//按钮权限数组
        buttonPermissions.forEach(e =>{
          for(let key in e){
            if(key == 'menu_code'){
              menuButtonPermissions.push(e[key])
            }
          }
        });
        this.buttonPermissions.isUpdata = menuButtonPermissions.includes('APIUpdata') ? true : false; //是否有更新密钥权限
      },
      getMyapi(){
        let url = '/sys/api-manager/my-api-list'
        this.$api.post(url)
        .then(data=>{
          this.list = data.data.map(x=>{
            x.isShowAPISecret = false
            return x
          })
          this.$Bus.$emit('Loading',false)
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading',false)
        })
      },
      //更新密钥
      refreshSecret(id){
        this.$confirm("是否更新密钥？", "提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center:true
        })
        .then(() => {
          this.$Bus.$emit('Loading',true);
          let url = '/sys/api-manager/refresh_secret?id='+ id
          this.$api.post(url)
          .then(data=>{
             console.log(data,'data','red')
            if(data){
              this.$message.success('更新成功')
              this.getMyapi()
            }else{
              this.$Bus.$emit('Loading',false);
            }

          })
          .catch(err=>{
             console.log(err);
            this.$Bus.$emit('Loading',false);
          })
        })
        .catch(() => {});
      },
      copy(id){
        let obj = document.getElementById(id)
        obj.select();
        document.execCommand("Copy")
        this.$message.success('复制成功')
      },
    },
    watch: {}
  }
</script>
